犀利开发—jQuery内核详解与实践-6_动画效果设计及其高效实践

第 1 章 jQ起步

第 2 章 jQ解密技术

第 3 章高效选择的技巧与原理

第 4 章文档对象的操作及高效实践

第 5 章事件封装机制与解析

5.1 事件模型

5.2 jQuery事件模型

5.3 jQuery页面初始化

5.4 使用JS自定义jQ的事件方法

2018.1.16 星期 23:12

第 6 章动画效果设计及其高效实践

6.1 直接显示和隐藏

1 jQ实现显隐效果

2 JS实现显隐效果

DOMextend("show",function(){
    var _this=this
    _this.style.display=""
    return _this
})

3 折叠效果

4 树形结构

5 Tab选项卡

6 显隐切换

6.2 滑动显示和隐藏

1 jQ实现的滑动显隐效果

2 JS实现的滑动显示效果

slideDown(t,fn)
// EXCLUDE:setInterval实现的；可能已经不具有现实意义了

3 JS实现的滑动隐藏效果

// EXCLUDE:setInterval实现的；可能已经不具有现实意义了

4 jQ设计的滑动显隐切换

slideToggle()

// NOTE:自己做的playerNote，用了css3的height，transition，性能应该好一些
// TODO:可以考虑封装一波

6.3 渐隐和渐显

不透明度

1 jQ实现的渐隐渐显效果

fadeIn(t,fn),fadeOut(),fadeTo(2000,0.4)

2 JS实现的渐显效果

DOMextend('setOpacity',function(n){
    var _this=this
    var n=parseFloat(n)
    if(n&&(n>100)||!n) n=100
    if(n&&n<0>) n=0
    if(_this.filters){
        _this.style.filter="alpha(opacity="+n+")"
    }else{
        _this.style.opacity=n/100
    }
})

// EXCLUDE:setInterval实现的；可能已经不具有现实意义了

3 JS实现的渐隐效果

// EXCLUDE:setInterval实现的；可能已经不具有现实意义了
DOMextend(‘fadeOut’,function(time,fn){
var _this=this
var isShow=_this.getStyle(‘display’)
if(isShow==’none’) return
var t=5 //设置定时器的间隔时间为5毫秒
var step=t*100/time //计算步长
var i=100 //定义不透明度初始值为100
var interval=setInterval(function(){
_this.setOpacity(i)
i-=step
if(i<=0){
clearTimout(interval)
_this.style.display=’none’
if(fn)//如果存在回调函数，则调用该回调函数
fn()
}
},t)
})

6.4 自定义动画

1 jQ自定义动画

animate({animateObj},t,effect,fn)
animate({animateObj},[others])

2 使用jQ停止动画

stop(是否清空队列,是否立即完成)

3 使用jQ关闭动画

jQuery.fx.off=true

4 使用JS实现滚动动画

var $=function(id){
    retrun "string"==typeof id? document.getElementById(id):id
}
var addEventHandler=function(oTarget,sEventType,fnHandler){
    if(oTarget.addEventHandler){//DOM 2事件处理模型
        oTarget.addEventHandler(sEventType,fnHandler)
    }else if(oTarget.attachEvent){
        oTarget.attachEvent("on"+sEventType,fnHandler)
    }else{//DOM 0 级事件模型
        oTarget["on"+sEventType]=fnHandler
    }
}

var Scroller=function(){
    this.init.apply(this,arguments)
}
Scroller.prototype={
    init:function(box,scroller,left,right,options){
        var _this=this,box=$(box),scroller=$(scroller)
        this.boxWidth=box.offsetWidth
        this.scroWidth=scroller.offsetWidth
        if(this.scroWidth<=this.boxWidth) return
        box.style.overflow="hidden"
        scroller.appendChild(scroller.cloneNode(true))
        this.box=box
        this.scroll=true
        this.setOptions(optionis)
        this.side=1//滚动方向向左
        switch(this.options.Side){
            case "right":
                this.side=-1
                break;
            case "left":
            default:
                tihs.side=1    
        }
        addEventHandler(scroller,"mouseover"，function(){_this.scroll=false})
        addEventHandler(scroller,"mouseout"，function(){_this.scroll=true})
        if(left){addEventHandler($(left),"click",function(){_this.side=1})}
        if(right){addEventHandler($(right),"click",function(){_this.side=-1})}
    },
    setOptions:function(options){
        this.options={//默认值
            Step:1,
            Time:10,
            Side:"left"
        }
        var options=options||{}
        for(var property in options){
            this.options[property]=options[property]
        }
    },
    scrolling:function(){
        if(this.scroll){
            var iscroll=this.box.scrollLeft,thisWidth=this.boxWidth
            if(this.side>0){
                if(iscroll>=(thisWidth*2-this.boxWidth)){iscroll-=thisWidth} 
            }else{
                if(iscroll<=0){iscroll+=thisWidth}
            }
            this.box.scrollLeft=iscroll+this.optionis.Step*this.side
        }
        var _this=this
        window.setTimeout(function(){
            _this.scrolling()
        },this.options.Time)
    }
}
//最后，调用
new Scroller('box','scroll','left','right')

// TODO:自定义滚动，轮播，分页
//acuviewer的页面上有滚动，还有分页，可以看一看用的插件，也可能也是自己写的

2018.1.17 00:12

第 7 章 Ajax异步通信高效实践

7.1 Ajax应用的准备

7.2 Ajax应用的

7.3 从JS

7.4 从jQ角度

第 8 章高效开发和使用插件

8.1 创建jQ

8.2 创建jQ

8.3 jQ UI插件

第 9 章 jQ辅助工具

第 10 章使用jQ打造Ajax异步交互式动态网站

2018.1. 星期 P